<template>
  <view class="page">
    <!-- <comHead :datas="datasObj">
      <template #headerContent>
        <view class="search mt-30" style="height: 132rpx;">
          <view class="inputbox">
            <up-input @blur="hanleBlur" @focus="hanleFocus" @clear="searchDel" placeholder="请输入关键词搜索" @enter="Search"
              placeholderStyle="font-size: 28rpx;color: #D1D1D1;" border="none" clearable v-model="searchValue"
              prefixIcon="search"
              prefixIconStyle="font-size: 22px;color: #333333;font-weight: bold;margin-left:15rpx"></up-input>

          </view>
          <view class="button" v-if="isShowButton" @click="Search"> 搜索 </view>
        </view>
      </template>
</comHead> -->
    <view class="mt-60" style="margin-top: 100rpx;">
      <view class="flex-bwt">
        <text @click="reBack">返回</text>
        <text>搜索</text>
      </view>

      <view class="search mt-30" style="height: 132rpx;">
        <view class="inputbox">
          <up-input @blur="hanleBlur" @focus="hanleFocus" @clear="searchDel" placeholder="请输入关键词搜索" @enter="Search"
            placeholderStyle="font-size: 28rpx;color: #D1D1D1;" border="none" clearable v-model="searchValue"
            prefixIcon="search"
            prefixIconStyle="font-size: 22px;color: #333333;font-weight: bold;margin-left:15rpx"></up-input>

        </view>
        <view class="button" @click="Search"> 搜索 </view>
      </view>
    </view>


    <view class="content_box">
      <view v-if="isSearch">
        <view class="history auto mt-30 flex-bwt" v-if="isHistoryShow && searchHistoryData.length > 0">
          <text class="ft1">历史搜索</text>
          <view class="ft flex" @click="clear">
            <image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/icon13.png"></image>
            <view class="clear ml-8">清除</view>
          </view>
        </view>
        <view v-if="isHistoryShow" class="tagBox flex history mt-12">
          <view class="tag mr-20 mt-20 flex-center ft" v-for="(item, index) in searchHistoryData" :key="index"
            @click="hanleSelectItem(item.name)">
            <text>{{ item.name }}</text>
          </view>
        </view>
        <view class="history auto mt-30 flex-bwt">
          <text class="ft1">热门搜索</text>
        </view>
        <view class="tagBox flex history mt-12">
          <view class="tag mr-20 mt-20 flex-center ft" v-for="(item, index) in searchData.hot_search_list" :key="index"
            @click="hanleSelectItem(item.name)">
            <image v-if="index === 0" class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/icon14.png">
            </image>
            <text>{{ item.name }}</text>
          </view>
        </view>
        <view class="sign auto" v-if="searchInfo.type == 'project'">
          <view class="top">
            <view class="left">
              <view class="up">#热销项目#</view>
              <view class="down ft-eng">Popular Projects </view>
            </view>
          </view>
          <view class="pd-20 mt-10">
            <comProjectList_one v-if="searchData?.hot_product_list?.length > 0" :dataList="searchData.hot_product_list">
            </comProjectList_one>
          </view>
        </view>
        <view class="sign auto videoSign" v-else>
          <view class="top">
            <view class="left">
              <view class="ft1 ml-20">热搜视频</view>
              <!-- <view class="down ft-eng">Best-selling video </view> -->
            </view>
          </view>
          <view class="pd-30">
            <view class="vedio flex-bwt-wrap">
              <view class="vedioItem" v-for="item in searchData?.hot_video_list" :key="item.id"
                @click="goPage(`/pages/category/category?id=${item.id}&isReback=${true}`)">
                <image style="border-radius: 40rpx" class="wh-100" :src="item.cover" mode="aspectFill">
                </image>
                <image class="play wh-56" src="https://cdn.oss.bon-top.cn/static_bc/images/play.png"></image>
                <view class="card flex pd-12">
                  <view class="card_bg"></view>
                  <view class="avtor">
                    <image class="wh-56 bd-r50c" :src="item.sale_info.avatar" mode="aspectFill"></image>
                    <image class="huiyuan" v-if="item.sale_info.is_official"
                      src="https://cdn.oss.bon-top.cn/static_bc/images/certified.png">
                    </image>
                  </view>
                  <view class="desc ml-12 te-wid">
                    <view class="ft1 te-1 c-ff">{{ item.product_info.name }}</view>
                    <view class="ft3"><span v-for="tag in item.product_info.tags.slice(0, 2)" :key="tag.id">{{ ' #' +
                      tag.name
                        }}</span>
                    </view>
                  </view>
                </view>
              </view>

            </view>
          </view>


        </view>
      </view>
      <view v-else>
        <view class="tabBox mt-24 flex-eve" v-if="searchInfo.type == 'project'">
          <view class="tab flex-center ft" v-for="(item, index) in tabArray" :key="index"
            :class="{ active: currentTab === item.id }" @click="selectTab(index, item)">
            {{ item.name }}
          </view>
        </view>
        <view v-if="(currentTab === 0 || currentTab === 1) && searchInfo.type == 'project'">
          <view class="tabTwo auto flex-bwt mt-24">
            <view class="left flex">
              <view class="item ft" v-for="(item, index) in tab2Array" :key="item" @click="openShow(item, item.title)">
                <text class="c-66 text" :class="{ active: item.active }">{{
                  item.title
                }}</text>
                <image class="jiantou" src="https://cdn.oss.bon-top.cn/static_bc/images/up_down.png"></image>
                <text class="line" v-if="index < tab2Array.length - 1"
                  style="display: inline-block;width: 2rpx;height: 30rpx;background-color: #F1F1F1;margin-left: 20rpx;"
                  :style="{ marginLeft: item.active ? '12rpx' : '20rpx' }"></text>
                <!-- <view class="tipBox" v-if="currentIndex === index">
                <image class="wh-100" src="https://cdn.oss.bon-top.cn/static_bc/images/tipBg.png"></image>
                <view class="tipList ft">
                  <view
                    class="tipItem"
                    @click="selectTip(index, itm)"
                    style="width: 170rpx"
                    v-for="(itm, idx) in item.array"
                    :key="idx"
                  >
                    {{ itm }}
                  </view>
                </view>
              </view> -->

              </view>
            </view>
            <view class="right flex mr-24" @click="openShow">
              <text class="ft mr-8" :class="isFilter ? 'active' : ''">筛选</text>
              <image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/icon16.png"></image>
            </view>
          </view>
          <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="0">
            <view class="scroll-view-item_A ft flex-center" v-for="(item, index) in tipList" :key="index"
              :class="filterList[item.key]?.names?.includes(item.name) ? 'scroll-view-item_A_active' : filterList[item.key]?.names?.includes(item) ? 'scroll-view-item_A_active' : ''"
              @click="selectActivity(item)">
              {{ item.name }}
            </view>
          </scroll-view>
          <view class="cardList auto">

            <view class="pd-30">
              <comProjectList_one class="" v-if="searchProList.length > 0" :dataList="searchProList"
                :dataObj="dataListObj" :pageInfo="pageInfo" @getProjectList="getProductListData">
              </comProjectList_one>
            </view>


          </view>
        </view>
        <view v-if="currentTab === 2 || searchInfo.type !== 'project'">
          <view class="vedio flex-bwt-wrap pd-30">
            <view class="vedioItem" v-for="(item, index) in videoList" :key="item.id"
              @click="goPage(`/pages/category/category?id=${item.id}&isReback=${true}`)">
              <image style="border-radius: 40rpx" class="bg wh-100" :src="item.cover" mode="aspectFill"></image>
              <image class="play wh-56" src="https://cdn.oss.bon-top.cn/static_bc/images/play.png"></image>
              <view class="card flex pd-12">
                <view class="card_bg"></view>
                <view class="avtor">
                  <image class="wh-56 bd-r50c" :src="item.sale_info.avatar" mode="aspectFill"></image>
                  <image class="huiyuan" v-if="item.sale_info.is_official"
                    src="https://cdn.oss.bon-top.cn/static_bc/images/certified.png">
                  </image>
                </view>
                <view class="desc ml-12 te-wid">
                  <view class="ft1 te-1 c-ff">{{ item.product_info.name }}</view>
                  <view class="ft3"><span v-for="tag in item.product_info?.tags.slice(0, 2)" :key="tag.id">{{ ' #' +
                    tag.name
                      }}</span>
                  </view>
                </view>
              </view>
            </view>

          </view>
        </view>
        <view v-if="currentTab === 3">
          <view class="case pd-30">
            <view class="caseItem pd-20" v-for="(item, index) in caseList" :key="item.id">
              <view class="flex">
                <view @click="goTip(tag.id)" class="ft c-bbq" v-for="tag in item.product_info?.tags" :key="tag.id">
                  #{{ tag.name }}
                </view>
              </view>

              <view class="ft mt-20 c-99">
                {{ "订购商品：" }}
              </view>
              <view class="flex-bwt pb-20" style="border-bottom: 2rpx #f1f1f1 solid">
                <text class="ft1 ft-lue" style="width: 360rpx;">{{ item.product_info?.name }}</text>
                <view class="detail flex-center ft" @click="goProjectDetail(item.product_id)">
                  <text class="ft mr-8">{{ "查看商品" }}</text>
                  <image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png">
                  </image>
                </view>
              </view>
              <view class="flex ft mt-20 c-99" style="align-items: flex-start;">
                <view style="flex-shrink: 0;">订购时间：</view>
                <view class="ft c-33">{{ item.order_time }}</view>
              </view>
              <view class="flex ft mt-20 c-99" style="align-items: flex-start;">
                <view style="flex-shrink: 0;">交付时间：</view>
                <view class="ft c-33">{{ item.deliver_time }}</view>
              </view>
              <view class="flex ft mt-20 c-99" style="align-items: flex-start;">
                <view style="flex-shrink: 0;">办理结果：</view>
                <view class="ft c-33">{{ item.handle_result }}</view>
              </view>
              <view class="flex ft mt-20 c-99" style="align-items: flex-start;">
                <view style="flex-shrink: 0;">办理周期：</view>
                <view class="ft c-33">{{ item.handle_cycle }}</view>
              </view>
              <view class="flex ft mt-20 c-99" style="align-items: flex-start;">
                <view style="flex-shrink: 0;">客户条件：</view>
                <view class="ft c-33">
                  {{ (item.customer_condition.substring(0, 20) + (item.customer_condition.length > 20 ? '...' : '')) }}
                </view>
              </view>
              <template v-if="item.images && item.images.length > 0">
                <view class="ft mt-20 c-99">
                  {{ "案例图片：" }}
                </view>
                <view class="imgGroup flex mt-20 " style="width: 650rpx;overflow: hidden;position: relative;">
                  <view class="group" v-for="(img, index) in item.images" :key="index"
                    @click="handlePreview(index, item.images)">
                    <image class="wh-100" mode="aspectFill" :src="img"></image>
                    <view class="img-count flex-center">{{ item.images.length }}</view>
                  </view>
                </view>
              </template>
              <view class="watch flex-center" @click="goDetail(item.id)">
                <text class="ft">查看详情</text>
                <image class="wh-24 ml-8" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png"></image>
              </view>
            </view>
          </view>
        </view>
        <view v-if="currentTab === 4">
          <view class="case pd-30">
            <view class="caseItem pd-20" v-for="(item, index) in evaluateList" :key="item.id">
              <view class="ft c-99">
                {{ "订购商品：" }}
              </view>
              <view class="flex-bwt mt-20 pb-20" style="border-bottom: 2rpx #f1f1f1 solid">
                <text class="ft1">{{ item.product_name }}</text>
                <view class="detail flex-center ft" @click="goProjectDetail(item.product_id)"
                  v-if="item.product_id > 0">
                  <text class="ft mr-8">{{ "查看商品" }}</text>
                  <image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png"></image>
                </view>
              </view>
              <view class="ft c-99 mt-20">
                {{ "订购评论：" }}
              </view>
              <view class="comments mt-20 flex">
                <view class="wh-68">
                  <image class="avtor wh-100" :src="item.user_info.avatar"></image>
                </view>
                <view class="right ml-20">
                  <view class="ft1 flex">{{ item.user_info.nickname }}
                    <view class="nameplate ft ft-20 c-dbf text_center" v-if="item.user_info?.level_info?.id > 1">{{
                      item.user_info?.level_info?.name
                    }}</view>
                  </view>
                  <view class="ft mt-12">{{ item.ip_location + " | " + item.created_at }}</view>
                </view>
              </view>
              <view class="pd-20 mt-20 bd-r40"
                style="width: 644rpx;background: linear-gradient(180deg,rgba(255, 255, 255, 0) 0%,#ffffff 100%);">
                <view class="score flex">
                  <!-- <up-rate active-color="#333333" v-model="item.star" readonly inactive-color="#D1D1D1" size="14"
                    gutter="4"></up-rate> -->
                  <comRate ref="comRate" v-if="item.star" :num="item.star" disabled>
                  </comRate>
                  <text class="ft ml-10 c-99" v-if="item.product_info">{{ "已购买" + item?.product_info?.name + "套餐"
                  }}</text>
                </view>
                <view class="flex-start">
                  <view class="tcard ft c-66 mt-20 mr-10 flex-center" v-for="tag in item.tags" :key="tag.id">
                    {{ tag.name }}
                  </view>
                </view>
                <view style="width: 610rpx;" class="ft ft-lue c-66 mt-20">{{ item.name }}</view>
              </view>
              <view class="watch flex-center" @click="goEvaluateDetail(item.id)">
                <text class="ft">查看更多</text>
                <image class="wh-24 ml-10" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png"></image>
              </view>
            </view>

          </view>
        </view>
      </view>
    </view>

    <up-modal width="420rpx" @confirm="confirm" @cancel="cancel" contentTextAlign="center" :show="showModel"
      :showCancelButton="true" :content="content">
    </up-modal>
  </view>
  <comFilterPup ref="comFilter" v-if="show" :filterKeys="filterKeys" :datas="filterList" @getFiler="getFiler"
    @closeShow="closeShow" :type="pupTitle">
  </comFilterPup>
</template>
<script setup>
import { ref, reactive } from "vue";
import { utils } from '@/utils/utils.js';
import { api } from '@/utils/api.js';
import { onLoad, onHide, onUnload } from "@dcloudio/uni-app";
import comFilterPup from '@/components/comFilterPup.vue'
import comProjectList_one from "@/components/comProjectList_one.vue";
import comVedioList from "@/components/comVedioList.vue";
import comHead from '@/components/comHead.vue';
import comRate from '@/components/comRate.vue'

let datasObj = reactive({
  title: '搜索',
  img: '',
  color: '#FFFFFF',
  direction: '',
  scrollTop: 0,
  noBack: false,
  height: 240
})
let pageInfo = reactive({
  page: 1,
  pageSize: 10
})

const reBack = () => {
  // 返回
  // 当前为搜索列表页
  if (!isShowButton.value) {
    isShowButton.value = !isShowButton.value
    isSearch.value = !isSearch.value
    searchValue.value = ''

  } else {
    uni.navigateBack(-1)
  }
}

let app = getApp()


onUnload(() => {
  if (app.globalData.isTeacherAdd) app.globalData.isTeacherAdd = false

  // console.log('关闭', app.globalData.isTeacherAdd)

})
const isShowButton = ref(true);
const showModel = ref(false);
const searchValue = ref('');
const isHistoryShow = ref(true);
const content = ref('确定要清除历史搜索吗')
const searchData = ref({})
const searchDataVideo = ref([{ videos: [] }])
const getSearchData = () => {
  utils.request(api.index, {
  }, 'get').then((res) => {
    searchData.value = res.data.info
    // searchData.value.hot_video_list.videos = res.data.info.hot_video_list
    searchDataVideo.value[0].videos = res.data.info.hot_video_list
    console.log(searchData.value, "res>>>>>>>>>>>");
    console.log(searchDataVideo.value, "video>>>>>>>>>>>");
  })
}
const selectActivity = (item) => {
  if (!filterList[item.key].ids.includes(item.id)) {
    filterList[item.key].ids.push(item.id)
    filterList[item.key].names.push(item.name)
  } else {
    filterList[item.key].ids = filterList[item.key].ids.filter(f => f != item.id)
    filterList[item.key].names = filterList[item.key].names.filter(f => f != item.name)
  }
  getFiler(filterList, filterLength.value)
}

// 拿到子组件传过来的值 进行处理并搜索
// 列表名称对应传递的参数名称 key:value 列表名:参数名
const selectLabel = {
  'preferential': 'preferential_ids',
  'activity_tag': 'activity_tag_ids',
  'overall_sort': 'orderBy',
  'country': 'country_ids',
  'price_sort': 'orderType',
  'imm_identity_cate': 'imm_identity_cate',
  'imm_handle_cate': 'imm_handle_cate',
  'imm_handle_cycle': 'imm_handle_cycle',
  'imm_approved_time': 'imm_approved_time',
  'imm_live_require': 'imm_live_require',
  'imm_nocrime_require': 'imm_nocrime_require',
}



// 筛选点击确认时触发
let selectObj = reactive({})
const filterLength = ref(0)
const isFilter = ref(false)
const getFiler = (data, leng) => {
  console.log('getFiler', data)
  filterList = data
  show.value = false;
  isFilter.value = Number(leng) > 0
  filterLength.value = Number(leng)
  Object.keys(selectLabel).forEach(f => {
    selectObj[selectLabel[f]] = data[f].ids
    tab2Array.value.forEach(tab => {
      tab.title = data[tab.key].ids.length > 0 ? data[tab.key].names[0] : data[tab.key].name
      tab.active = data[tab.key].ids.length > 0
    })
  })

  closeShow()
  // 请求数据
  getProductListData()

}
// 打开筛选弹窗
let filterListView = reactive([])
let filterKeys = reactive([])
const comFilter = ref(null)

// 打开筛选
const openShow = (data, title) => {
  console.log('data', data)
  if (data.key) {
    filterKeys = [data.key]
  } else {
    filterKeys = ['imm_identity_cate', 'imm_handle_cate', 'imm_handle_cycle', 'imm_approved_time', 'imm_live_require', 'imm_nocrime_require']
  }

  show.value = true;
  comFilter.value?.open()

};
const closeShow = () => {
  show.value = false;
}

const goTip = (tigId) => {
  uni.navigateTo({
    url: `/subpackage/clinch/tipSearch?tigId=${tigId}`,
  });
}
const goDetail = (id) => {
  uni.navigateTo({
    url: `/subpackage/clinch/clinchDetail?id=${id}`,
  });
};

const goEvaluateDetail = (id) => {
  uni.navigateTo({
    url: `/subpackage/search/detail?id=${id}`,
  });
};

const goGoods = (productId) => {
  uni.navigateTo({
    url: `/subpackage/immigration/immigration?productId=${productId}`,
  });
}
const caseList = ref([])
const getDealCaseListData = () => {
  utils.request(api.getDealCaseList, {
    page: 1,
    pageSize: 15,
    keywords: searchValue.value,

  }, 'get').then((res) => {
    console.log(res, "res>>>>>>>>>>>");
    caseList.value = res.data.items
  })
}

//提交
const submit = () => {
  getProductListData()
  show.value = false;
}

const searchHistoryData = ref([])
const getSearchHisData = () => {
  utils.request(api.history
    , {

    }, 'get').then((res) => {
      searchHistoryData.value = res.data.info.list
      console.log(searchHistoryData.value, "res>>>>>>>>>>>");

    })
}

//评价
const evaluateList = ref([])

const getEvaluateListData = () => {
  utils
    .request(
      api.getEvaluateList,
      {
        page: 1,
        pageSize: 5,
        keywords: searchValue.value

      },
      "get"
    )
    .then((res) => {
      evaluateList.value = res.data.items;
    });
}

//获取产品列表 搜索结果
const searchProList = ref([])
let dataListObj = reactive({})
const getProductListData = () => {
  let tesrObj = {

    page: 1,
    pageSize: 50,
    keywords: searchValue.value,
    cate_name: currentName.value,
    ...selectObj
  }
  console.log(tesrObj, "tesrObj4>>>>>>>>>>>");
  utils.request(api.getProductList
    , tesrObj, 'post').then((res) => {
      dataListObj = res.data
      searchProList.value = res.data.items


    })
}



const getSearchDel = () => {
  utils.request(api.clearHistory
    , {

    }, 'get').then((res) => {
      console.log('清除成功');
      if (res.code === 200) {
        isHistoryShow.value = false;
        showModel.value = false;
        utils.toast('清除成功')
      }


    })

}

const addSearch = () => {
  utils.request(api.addHistory
    , {
      txt: searchValue.value
    }, 'post').then((res) => {
      console.log('清除成功');
      if (res.code === 200) {
        getSearchHisData()
      }


    })

}

// 获取赛选列表数据
let info = reactive([])
let filterList = reactive({})
const getProductFilterData = () => {
  utils.request(api.getProductFilter
    , {

    }, 'get').then((res) => {
      if (res.code === 200) {
        info = res.data?.info
        tab2Array.value.forEach(item => {
          item.array = res.data?.info[item.key]
        })
        let labelObj = {
          'preferential': '活动优惠标签',
          'activity_tag': '活动标签',
          'overall_sort': '综合排序',
          'country': '洲/国家',
          'price_sort': '价格排序',
          'imm_identity_cate': '身份类别',
          'imm_handle_cate': '办理类别',
          'imm_handle_cycle': '办理周期',
          'imm_approved_time': '获批时间',
          'imm_live_require': '居住要求',
          'imm_nocrime_require': '无犯罪要求',
        }

        let keys = Object.keys(labelObj)
        let includes = ['overall_sort', 'price_sort',]
        for (let key of keys) {
          filterList[key] = {
            key: key,
            name: labelObj[key],
            isRadio: includes.includes(key) ? true : false,
            isArr: key.startsWith('imm_') ? true : false,
            list: info[key] || [],
            ids: [],
            names: [],
          }
          if (key == 'activity_tag' || key == 'preferential') {
            let arr = res.data.info[key]
            arr.forEach(f => f.key = key)
            tipList.value = [...tipList.value, ...arr]
            console.log('tipList', tipList.value)


          }
        }
        console.log('filterList', filterList)
      }
    })
}

const show = ref(false);
const tabArray = ref([
  { id: 0, name: '移民', key: '移民' },
  { id: 1, name: '教育', key: '教育' },
  { id: 2, name: '视频', key: '视频' },
  { id: 3, name: '案例', key: '案例' },
  { id: 4, name: '成交评价', key: '成交评价' },]);

const tab2Array = ref([
  {
    title: "综合推荐",
    key: 'overall_sort',
    array: ["综合推荐", "按点击量", "按播放量"],
  },
  {
    title: "国家",
    key: 'country',
    array: ["美国", "俄国", "法国"]
  },
  {
    title: "价格",
    key: 'price_sort',
    array: ["升序", "降序"]
  },
]);

const tipList = ref([]);
const currentTab = ref(0);
const currentName = ref('移民')
const selectTab = (index, item) => {
  currentTab.value = item.id;
  currentName.value = item.key;
  searchProList.value = []
  if (index === 2) {
    getVideoListData()
  }
  else if (index === 3) {
    getDealCaseListData()
  }
  else if (index === 4) {
    getEvaluateListData()
  } else {
    console.log('hhhhh', searchProList.value)
    getProductListData();

  }
};
const videoList = ref([])

const getVideoListData = (id) => {
  utils
    .request(
      api.getVideoList, {
      page: 1,
      pageSize: 5,
      tag_id: id ?? '',
      getReply: 0,
      keywords: searchValue.value
    },
      "get"
    )
    .then((res) => {
      videoList.value = res.data.items;
    });
}
const hanleSelectItem = (item) => {
  searchValue.value = item;
  // getProductListData()
  if (searchInfo.value.type == 'video') {
    getVideoListData()
  } else {
    addSearch()

    getProductListData()

  }
  isSearch.value = false;
  isShowButton.value = false;

}
const searchDel = () => {
  isSearch.value = true;
  isShowButton.value = true;
}
const currentIndex = ref(null);
const isSearch = ref(true);
const hanleBlur = () => {
  //isSearch.value=true
};

const hanleFocus = () => {
  // isSearch.value = false;
};


const confirm = () => {
  getSearchDel()

}
// 跳转
const goPage = (url) => {
  uni.navigateTo({
    url: url
  })
}
const clear = () => {
  showModel.value = true;
  // getSearchDel()

}

const cancel = () => {
  showModel.value = false;
}
const Search = () => {
  console.log('搜索', searchInfo.value.type)
  if (!searchValue.value.length > 0) return
  isSearch.value = false;

  addSearch()
  if (searchInfo.value.type == 'video') {
    getVideoListData()
  } else {
    if (currentTab.value === 2) {
      getVideoListData()

    } else if (currentTab.value == 3) {
      getDealCaseListData()

    } else if (currentTab.value == 4) {
      getEvaluateListData()

    } else {

      getProductListData()
    }

  }

};
const goProjectDetail = (id) => {
  uni.navigateTo({
    url: `/subpackage/immigration/immigration?id=${id}`,
  });
};
const searchInfo = ref({})
onLoad((options) => {
  searchInfo.value = {
    type: 'project',
    title: '搜索'
  }
  datasObj.title = '搜索'
  if (options.type == 'video') {
    searchInfo.value = {
      type: options.type,
      title: '视频搜索'
    }
    datasObj.title = '视频搜索'
    currentTab.value = 2

  }
  // 关键字搜索 更多服务中选项跳转过来 直接搜索关键字
  if (options.keywords) {
    searchValue.value = options.keywords
    Search()
  }
  getSearchData()
  getSearchHisData()
  getProductFilterData()
})

</script>
<style lang="scss" scoped>
.contry {
  display: flex;

  .slider {
    width: 200rpx;
    // border: 2rpx solid red;
    height: 100%;

    .item {
      width: 200rpx;
      height: 78rpx;
      background: #F1F1F1;
      border-bottom: #ccc solid 2rpx;
    }

    .active {
      color: #dbf046;
      background: #333333;
    }
  }

  .main {
    width: calc(100% - 200rpx);
    // border: 2rpx solid blue;
    display: flex;
    flex-wrap: wrap;

    .service {
      height: 58rpx;
      background: #f1f1f1;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      padding-left: 20rpx;
      padding-right: 20rpx;
      margin-left: 20rpx;
      margin-top: 20rpx;
    }

    .active {
      color: #dbf046;
      background: #333333;
    }
  }
}

.litItem {
  width: 650rpx;
  height: 82rpx;
  background: #F8F8F8;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
}

.search {
  width: 100%;
  display: flex;
  box-sizing: border-box;
  padding-left: 30rpx;
  padding-right: 30rpx;
  justify-content: center;

  .inputbox {
    // width: 574rpx;
    width: 100%;
    flex: 1;
    height: 80rpx;
    display: flex;
    align-items: center;
    background: #f8f8f8;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    border: 2rpx solid #333333;
  }

  .button {
    margin-left: 20rpx;
    width: 96rpx;
    height: 80rpx;
    background: #333333;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    font-weight: 400;
    font-size: 28rpx;
    color: #ffffff;
    text-align: center;
    line-height: 80rpx;
  }
}

.vedio {
  .vedioItem {
    width: 334rpx;
    height: 614rpx;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    //border: 1rpx solid red;
    margin-bottom: 16rpx;
    position: relative;



    .play {
      position: absolute;
      top: 297rpx;
      left: 147rpx;
      z-index: 3;
    }

    .card {
      width: 314rpx;
      height: 82rpx;
      border-radius: 44rpx 44rpx 44rpx 44rpx;
      position: absolute;
      bottom: 10rpx;
      left: 10rpx;
      z-index: 10;
      overflow: hidden;

      .card_bg {
        width: 314rpx;
        height: 82rpx;
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        // background: #fff;
        background-color: rgba(255, 255, 255, 0.6);
        // opacity: 0.7;
        // filter: blur(30rpx);
        backdrop-filter: blur(30rpx);

      }

      .avtor {
        width: 56rpx;
        height: 56rpx;
      }

      .huiyuan {
        width: 22rpx;
        height: 20rpx;
        position: absolute;
        bottom: 10rpx;
        left: 44rpx;
        z-index: 12;
      }
    }
  }
}

.case {
  .caseItem {
    width: 690rpx;
    // height: 802rpx;
    background: #f8f8f8;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    border: 1rpx solid #f8f8f8;
    margin-bottom: 20rpx;

    .detail {
      width: 170rpx;
      height: 54rpx;
      background: #ffffff;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
    }

    .group {
      width: 148rpx;
      height: 186rpx;
      border-radius: 40rpx;
      overflow: hidden;
      position: relative;
      flex-shrink: 0;
      margin-right: 20rpx;

      .play-icon {
        position: absolute;
        top: 12rpx;
        left: 12rpx;
        width: 36rpx;
        height: 36rpx;
        z-index: 1;
      }

      .img-count {
        display: none;
      }
    }

    .imgGroup {
      .group:nth-child(4) {
        .img-count {
          display: flex;
          width: 54rpx;
          height: 52rpx;
          // background: #F8F8F8;
          background: rgba(248, 248, 248, 0.3);
          border-radius: 26rpx;
          font-weight: 800;
          font-size: 22rpx;
          color: #333333;
          position: absolute;
          bottom: 10rpx;
          right: 10rpx;
          z-index: 2;
          backdrop-filter: blur(30rpx);
          -webkit-backdrop-filter: blur(30rpx);
        }
      }
    }

    .watch {
      width: 650rpx;
      height: 74rpx;
      background: linear-gradient(180deg,
          rgba(255, 255, 255, 0) 0%,
          #ffffff 100%);
      border-radius: 0rpx 0rpx 40rpx 40rpx;
    }

    .avtor {
      border-radius: 50%;
    }

    .nameplate {
      width: 88rpx;
      height: 36rpx;
      background: #333333;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      line-height: 36rpx;
    }

    .tcard {
      padding-left: 20rpx;
      padding-right: 20rpx;
      height: 58rpx;
      background: #F1F1F1;
      border-radius: 34rpx 34rpx 34rpx 34rpx;
    }
  }
}

.confirm {
  width: 750rpx;
  height: 118rpx;
  background: #f8f8f8;
  box-shadow: 0rpx -2rpx 2rpx 2rpx rgba(0, 0, 0, 0.05);

  .submit {
    width: 482rpx;
    height: 78rpx;
    background: #333333;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
  }

  .reset {
    width: 168rpx;
    height: 78rpx;
    background: #ffffff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
  }
}


.scrollPop {
  height: 920rpx;
}

.popup {
  //height: 920rpx;
  // border: 2rpx solid red;
  box-sizing: border-box;
  padding: 40rpx;

  .service {
    height: 58rpx;
    background: #f1f1f1;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    padding-left: 20rpx;
    padding-right: 20rpx;
    margin-left: 20rpx;
    margin-top: 20rpx;
  }

  .active {
    background: #333333;
    color: #dbf046;
  }
}

.scroll-view_H {
  margin-top: 24rpx;
  white-space: nowrap;
  width: 100%;
  padding: 0 30rpx;
  box-sizing: border-box;
}

.scroll-view-item_A {
  display: inline-block;
  height: 58rpx;
  background: #ffffff;
  border-radius: 34rpx 34rpx 34rpx 34rpx;
  border: 2rpx solid #f1f1f1;
  margin-right: 20rpx;
  line-height: 58rpx;
  text-align: center;
  padding-left: 20rpx;
  padding-right: 20rpx;
}

.scroll-view-item_A_active {
  margin-left: 24rpx;
  background: #000;
  color: #f1f1f1;
}

// .scroll-view-item_A:first-child {
//   margin-left: 24rpx;
//   background: #000;
//   color: #f1f1f1;
// }

.history {
  margin-left: 24rpx;
  margin-right: 24rpx;
}

.history:hover {
  color: red;
}

.tagBox {
  flex-wrap: wrap;
  justify-content: flex-start;

  .tag {
    min-width: 120rpx;
    padding: 0 10rpx;
    height: 58rpx;
    background: #f8f8f8;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
  }
}

.sign {
  margin-top: 60rpx;
  width: 690rpx;
  min-height: 252rpx;
  background: linear-gradient(180deg, #fbffdf 0%, #ffffff 100%);
  border-radius: 40rpx 40rpx 40rpx 40rpx;
  padding-top: 24rpx;

  .top {

    width: 100%;
    display: flex;
    justify-content: space-between;

    .left {
      position: relative;
      flex: 1;
      height: 44rpx;

      .up {
        width: 100%;
        height: 44rpx;
        font-weight: 800;
        font-size: 32rpx;
        color: #333333;
        position: absolute;
        top: 0;
        left: 20rpx;
        z-index: 9;
      }

      .down {
        width: 100%;
        position: absolute;
        top: 10rpx;
        left: 20rpx;
        font-family: 'DIN COROS';
        font-weight: 900;
        font-size: 44rpx;
        line-height: 44rpx;
        color: #dbf046;
        z-index: 2;
      }
    }

    .right {
      width: 176rpx;
      height: 54rpx;
      background: #333333;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      font-weight: 400;
      font-size: 24rpx;
      color: #dbf046;
      text-align: center;
      line-height: 54rpx;
      margin-right: 20rpx;
    }

    .more {
      width: 122rpx;
      margin-right: 20rpx;
      height: 54rpx;

      display: flex;
      justify-content: center;
      align-items: center;
      background: #ffffff;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      border: 2rpx solid #333333;

      .text {
        font-weight: 400;
        font-size: 24rpx;
        color: #333333;
        margin-right: 8rpx;
      }

      .icon {
        width: 24rpx;
        height: 24rpx;
      }
    }
  }
}

.videoSign {
  background: #fff;
  padding: 0;
  width: 100%;
}

.project {
  margin: auto;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  width: 650rpx;
  height: 408rpx;
  background: #ffffff;
  border-radius: 40rpx 40rpx 40rpx 40rpx;
  border: 2rpx solid #f1f1f1;

  .left {
    width: 222rpx;
    height: 274rpx;
    border-radius: 40rpx 40rpx 40rpx 40rpx;

    .img {
      border-radius: 40rpx 40rpx 40rpx 40rpx;
    }
  }

  .right {
    flex: 1;
    height: 274rpx;

    .top {
      display: flex;
      flex-wrap: wrap;

      .tip {
        // width: 88rpx;
        height: 36rpx;
        box-sizing: border-box;
        // padding-left: 8rpx;
        // padding-right: 8rpx;
        background: linear-gradient(88deg, #dbf046 0%, #ffee7e 100%);
        border-radius: 8rpx 8rpx 8rpx 8rpx;
      }
    }

    .domn {
      .price {
        //width: 148rpx;
        height: 92rpx;
        background: linear-gradient(90deg,
            #fff5f3 0%,
            rgba(255, 245, 243, 0) 100%);
        border-radius: 20rpx 20rpx 20rpx 20rpx;
      }

      .price2 {
        //  width: 148rpx;
        height: 92rpx;
        background: #fff;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
      }
    }
  }

  .foot {
    width: 610rpx;
    height: 74rpx;
    background: linear-gradient(92deg, #f8f8f8 0%, rgba(248, 248, 248, 0) 100%);
    border-radius: 40rpx 40rpx 40rpx 40rpx;
  }
}

.tabBox {
  .tab {
    width: 122rpx;
    height: 72rpx;
    background: #f8f8f8;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
  }

  .active {
    background: #dbf046;
  }
}

.jiantou {
  width: 34rpx;
  height: 20rpx;
}

.tabTwo {
  // width: 690rpx;
  margin: 20rpx 30rpx 0;
  height: 74rpx;
  background: linear-gradient(180deg, #f8f8f8 0%, rgba(248, 248, 248, 0) 100%);
  border-radius: 20rpx 20rpx 20rpx 20rpx;

  .text {
    margin-left: 20rpx;
  }

  .active {
    //  font-size: 28rpx;
    font-size: 22rpx;
    color: #333;
    font-weight: 800;
    margin-left: 12rpx;

  }

  .left {
    height: 100%;
    // background-color: #ccc;
    align-items: center;

    .item {
      // margin-right: 24rpx;
      // border-right: #F1F1F1 2rpx solid;
      // padding-left: 20rpx;
      position: relative;
      height: 100%;
      display: inline-flex;
      align-items: center;
    }

    .item:last-child {
      border: none;
    }

    .tipBox {
      width: 176rpx;
      height: 218rpx;
      z-index: 99;
      //border: 2rpx solid red;
      position: absolute;
      left: -20rpx;

      .tipList {
        position: absolute;
        top: 32rpx;
        left: 0;
        text-align: center;
        line-height: 60rpx;
      }
    }
  }
}

.cardList {
  // .project {
  //   margin: auto;
  //   margin-top: 20rpx;
  //   margin-bottom: 20rpx;
  //   width: 650rpx;
  //   height: 408rpx;
  //   background: #ffffff;
  //   border-radius: 40rpx 40rpx 40rpx 40rpx;
  //   border: 2rpx solid #f1f1f1;

  //   .left {
  //     width: 222rpx;
  //     height: 274rpx;
  //     border-radius: 40rpx 40rpx 40rpx 40rpx;
  //   }

  //   .right {
  //     flex: 1;
  //     height: 274rpx;

  //     .top {
  //       .tip {
  //         // width: 88rpx;

  //         height: 36rpx;
  //         background: linear-gradient(88deg, #dbf046 0%, #ffee7e 100%);
  //         border-radius: 8rpx 8rpx 8rpx 8rpx;
  //       }
  //     }

  //     .domn {
  //       .price {
  //         width: 148rpx;
  //         height: 92rpx;
  //         background: linear-gradient(90deg,
  //             #fff5f3 0%,
  //             rgba(255, 245, 243, 0) 100%);
  //         border-radius: 20rpx 20rpx 20rpx 20rpx;
  //       }

  //       .price2 {
  //         width: 148rpx;
  //         height: 92rpx;
  //         background: #fff;
  //         border-radius: 20rpx 20rpx 20rpx 20rpx;
  //       }
  //     }
  //   }

  //   .foot {
  //     width: 610rpx;
  //     height: 74rpx;
  //     background: linear-gradient(92deg, #f8f8f8 0%, rgba(248, 248, 248, 0) 100%);
  //     border-radius: 40rpx 40rpx 40rpx 40rpx;
  //   }
  // }
}
</style>
